import React from "react";
import "../../assets/sass/home_page/free_templates/word_bench/work_bench_menu/work_bench_menu.scss";
import { Menu, MenuProps } from "antd";
import { useLocation } from "react-router-dom";
import { HomeOutlined } from "@ant-design/icons";
const WorkBenchMenu = () => {
  const loaction = useLocation();

  type MenuItem = Required<MenuProps>["items"][number];

  const items: MenuItem[] = [
    {
      key: "grp_one",
      type: "group",
      children: [
        {
          key: "1",
          icon: <HomeOutlined />,
          label: "首页",
        },
      ],
    },
    {
      key: "grp_two",
      type: "group",
      label: "创意设计",
      children: [
        {
          key: "21",
          icon: (
            <img src="/src/assets/image/home_page/side_menu/H_five.png"></img>
          ),
          label: "H5",
        },
        {
          key: "22",
          icon: (
            <img src="/src/assets/image/home_page/side_menu/devise.png"></img>
          ),
          label: "海报",
        },
        {
          key: "23",
          icon: (
            <img src="/src/assets/image/home_page/side_menu/long_page.png"></img>
          ),
          label: "长页",
        },
        {
          key: "24",
          icon: (
            <img src="/src/assets/image/home_page/side_menu/form.png"></img>
          ),
          label: "表单",
        },
        {
          key: "25",
          icon: (
            <img src="/src/assets/image/home_page/side_menu/interaction.png"></img>
          ),
          label: "互动",
        },
        {
          key: "26",
          icon: (
            <img src="/src/assets/image/home_page/side_menu/E-book.png"></img>
          ),
          label: "电子画册",
        },
        {
          key: "27",
          icon: (
            <img src="/src/assets/image/home_page/side_menu/video.png"></img>
          ),
          label: "视频",
        },
        {
          key: "28",
          icon: (
            <img src="/src/assets/image/home_page/side_menu/AI_creation.png"></img>
          ),
          label: "AI创作",
        },
        {
          key: "29",
          icon: (
            <img src="/src/assets/image/home_page/side_menu/Digital_humans.png"></img>
          ),
          label: (
            <span style={{ display: "flex", alignItems: "center" }}>
              数字人
              <img
                style={{ width: "32px", height: "16px", marginLeft: "4px" }}
                src="/src/assets/image/home_page/side_menu/New.png"
              />
            </span>
          ),
        },
        {
          key: "220",
          icon: (
            <img src="/src/assets/image/home_page/side_menu/Mapping_tools.png"></img>
          ),
          label: "作图工具",
          children: [
            { key: "2201", label: "智能抠图" },
            { key: "2202", label: "智能海报" },
            { key: "2203", label: "拼图" },
            { key: "2204", label: "图片美化" },
            { key: "2205", label: "二维码美化" },
            { key: "2206", label: "文字云" },
            { key: "2207", label: "对话生成器" },
            { key: "2208", label: "格式转化器" },
            { key: "2209", label: "批量水印" },
          ],
        },
        {
          key: "221",
          icon: (
            <img src="/src/assets/image/home_page/side_menu/Marketing_tools.png"></img>
          ),
          label: "营销工具",
          children: [
            { key: "2211", label: "短信通知" },
            { key: "2212", label: "在线收款" },
            { key: "2213", label: "获客活码" },
            { key: "2214", label: "节日红包" },
            { key: "2215", label: "个人主页" },
          ],
        },
      ],
    },
    {
      key: "grp_three",
      type: "group",
      label: "其他",
      children: [
        {
          key: "31",
          icon: (
            <img src="/src/assets/image/home_page/side_menu/chat.jpg"></img>
          ),
          label: "案例中心",
        },

        {
          key: "32",
          icon: (
            <img src="/src/assets/image/home_page/side_menu/open_folder.jpg"></img>
          ),
          label: "正版素材",
        },
        {
          key: "33",
          icon: (
            <img src="/src/assets/image/home_page/side_menu/user.jpg"></img>
          ),
          label: "成为设计师",
        },
      ],
    },
  ];
  const onClick: MenuProps["onClick"] = (e) => {
    // window.open(e.key);
  };
  return (
    <div className="work_bench_menu">
      <Menu
        onClick={onClick}
        style={{ width: 204 }}
        defaultSelectedKeys={[loaction.pathname]}
        defaultOpenKeys={["sub1"]}
        mode="inline"
        items={items}
      />
    </div>
  );
};

export default WorkBenchMenu;
